<template>
	<el-container>
		<el-aside width="90px">
			<h1>诊</h1>
			<ul>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-shouye"></use>
					</svg>
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-yuyue"></use>
					</svg>
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-shouye8"></use>
					</svg>
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-shouye9"></use>
					</svg>
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-shouye2"></use>
					</svg>
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-zhihang"></use>
					</svg>
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-yonghu"></use>
					</svg>
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-kufangguanli"></use>
					</svg>
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-shouye1"></use>
					</svg>
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-shouye4"></use>
					</svg>
				</li>
			</ul>
		</el-aside>
		<el-main>
			<el-container>
				<el-header height="64px">
					<div class="user-info">
						<i class="el-icon-search"></i>
						<i class="el-icon-bell"></i>
						<el-dropdown>
							<span class="el-dropdown-link">
								<img src="../assets/img/portraint.jpg" alt="123">
								<span>陈志斌</span>
								<i class="el-icon-caret-bottom"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>我的消息</el-dropdown-item>
								<el-dropdown-item>设置</el-dropdown-item>
								<el-dropdown-item divided>退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</el-header>
				<el-main><router-view></router-view></el-main>
			</el-container>
		</el-main>
	</el-container>
</template>
<style scoped lang="less">
	.icon {
		width: 1em;
		height: 1em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}

	.el-container {
		height: 100%;

		.icon {
			width: 1em;
			height: 1em;
			vertical-align: -0.15em;
			fill: currentColor;
			overflow: hidden;
		}

		.icon {
			width: 1em;
			height: 1em;
			vertical-align: -0.15em;
			fill: currentColor;
			overflow: hidden;
		}

		.el-aside {
			height: 100%;
			background-color: #3f4359;
			overflow-y: auto;
			color: #fff;
			font-size: 30px;

			h1 {
				text-align: center;
				margin-top: 31px;
			}

			ul {
				margin-top: 58px;

				li {
					margin-top: 58px;
					margin-top: 30px;
					border-left: 2px solid #3f4359;
					cursor: pointer;
				}
			}
		}

		.el-header {
			padding: 0;
			box-sizing: border-box;
			border-bottom: 1px solid #e3e3e3;

			.user-info {
				float: right;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-right: 35px;

				i {
					font-size: 24px;
					line-height: 64px;
					margin-right: 25px;
					cursor: pointer;
				}
			}

			.el-dropdown-link {
				display: flex;
				align-items: center;
				cursor: pointer;
				img{
					width: 40px;
					height: 40px;
					border-radius: 50%;
					margin-right: 10px;
				}
			}

			.el-dropdown-item {
				text-align: center;
			}
		}

		.el-main {
			padding: 0;
		}

	}
</style>
<script>
	export default {
		name: 'home'
	}
</script>
